<template>
    <view>
        <view class="number-input">
            <view @click.stop="setBuyNum('reduce')" class="icon text-bold cuIcon-move text-grey text-sm"></view>
            <input
                :disabled="modelValue >= amount"
                :value="modelValue"
                type="number"
                class="text-center margin-lr-sm"
                style="width: 30rpx"
                @input="
                    (...event) => {
                        setBuyNum('input', event);
                    }
                "
                @click.stop=""
            />
            <view @click.stop="setBuyNum('add')" class="icon text-bold cuIcon-add text-grey text-base"></view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useTask } from "@/utils/message";

interface skuType {
    sku_id?: number;
    modelValue: number; // 数量
    step?: number; // 添加数量的步长
    amount: number; // 该规格库存
}

const props = withDefaults(defineProps<skuType>(), {
    modelValue: 0,
    step: 1,
    amount: 0,
    sku_id: 0
});
const emit = defineEmits(["update:modelValue", "setNum"]);
const setBuyNum = (type: string, target?: any) => {
    switch (type) {
        case "add":
            if (props.modelValue < props.amount) {
                emit("update:modelValue", props.modelValue + props.step);
                emit("setNum", {
                    id: props.sku_id,
                    num: props.modelValue + props.step,
                    isApi: true
                });
            } else {
                useTask("库存不足");
            }
            break;
        case "reduce":
            if (props.modelValue <= props.amount) {
                if (props.modelValue > 1) {
                    emit("update:modelValue", props.modelValue - props.step);
                    emit("setNum", {
                        id: props.sku_id,
                        num: props.modelValue - props.step,
                        isApi: true
                    });
                } else {
                    useTask("最少需要购买一件哦");
                    emit("update:modelValue", 1);
                    emit("setNum", {
                        id: props.sku_id,
                        num: 1,
                        isApi: false
                    });
                }
            } else {
                useTask("库存不足");
            }
            break;
        case "input":
            let inputNumber: number = parseInt(target[0]?.detail.value);
            if (inputNumber <= props.amount) {
                if (inputNumber < 1) {
                    emit("update:modelValue", 1);
                    emit("setNum", {
                        id: props.sku_id,
                        num: 1,
                        isApi: false
                    });
                    useTask("最少需要购买一件哦");
                } else {
                    emit("update:modelValue", inputNumber);
                    emit("setNum", {
                        id: props.sku_id,
                        num: inputNumber,
                        isApi: true
                    });
                }
            } else {
                emit("update:modelValue", inputNumber);
                emit("setNum", {
                    id: props.sku_id,
                    num: inputNumber,
                    isApi: true
                });
                useTask("库存不足");
            }
        default:
            break;
    }
};
</script>

<style scoped lang="scss">
.number-input {
    width: 200rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px #eee solid;
    border-radius: 50rpx;

    .icon {
        width: 50rpx;
        height: 50rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &:first-child {
            border-right: 2px solid #eee;
        }

        &:last-child {
            border-left: 2px solid #eee;
        }
    }

    input {
        flex: 1;
    }
}
</style>
